<template>
  <van-nav-bar title="审批任务" />
  <van-dropdown-menu ref="menuRef">
    <van-dropdown-item v-model="todoOption" :options="todoOptions" @change="onChange"/>
    <van-dropdown-item v-model="formOption" :options="formOptions" @change="onChange"/>
    <van-dropdown-item title="筛选" ref="itemRef">
      <van-cell center title="是否本人">
        <template #right-icon>
          <van-switch v-model="isSelf" />
        </template>
      </van-cell>
      <div style="padding: 5px 16px;">
        <van-button type="primary" block round @click="onChange">
          确认
        </van-button>
      </div>
    </van-dropdown-item>
    <van-dropdown-item title="排序" v-model="orderOption" :options="orderOptions" @change="onChange"/>
  </van-dropdown-menu>

  <van-tabbar route>
    <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
    <van-tabbar-item icon="search" to="/">新建单据</van-tabbar-item>
    <van-tabbar-item icon="friends-o" to="/mine">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
  import { ref } from 'vue'

  const todoOption = ref(0);
  const todoOptions = [
    { text: '未审批', value: 0 },
    { text: '已审批', value: 1 }
  ];
  const formOption = ref(0);
  const formOptions = [
    { text: '全部单据', value: 0 },
    { text: '申请单', value: 1 },
    { text: '借款单', value: 2 },
    { text: '报销单', value: 3 }
  ];
  const orderOption = ref(0);
  const orderOptions = [
    { text: '默认排序', value: 0 },
    { text: '金额由高到低', value: 1 },
    { text: '金额由低到高', value: 2 }
  ];
  const itemRef = ref(null);
  const isSelf = ref(true);
  const onChange = () => {
    console.log(todoOption.value)
    console.log(formOption.value)
    console.log(orderOption.value)
    console.log(itemRef.value)
  }

</script>
<style scoped lang="less">

</style>